<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: 0.5%;
        }

        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            padding: 5px 10px;
        }

        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
</body>
<!-- 导入 socket.io -->
<!-- src="/socket.io/socket.io.js"：这个路径会去当前文件下的  node_modules 中去找 -->
<script src="/socket.io/socket.io.js"></script>
<script src="/jquery.min.js"></script>
<script>
    $(function () {
        var socket = io('http://192.168.17.118:3000/')
        $('form').submit(function (e) {
            // 阻止默认行为
            e.preventDefault()
            // 发送信息给服务器
            socket.emit('sendval', {
                msg: $('#m').val()
            })
            // 将输入框内容清空
            $('#m').val('')
        })
        // 接收服务器的消息
        socket.on('sendval', val => {
            // 将消息渲染到页面上：将信息放到 ul 中的 li 标签中
            // // 创建一个 li 标签
            // var li = $('<li>')
            // // 给 li 标签设置内容
            // li.html(val.msg)
            // // 将 li 添加到 ul 中
            // $('#messages').append(li)
            $('#messages').append($('<li>').html(val.msg))
        })
    })
</script>

</html>